<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery制作tab栏</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        html{
            background: #1C1B1B;
        }
        .top {
            height: 70px;
            background: url("http://s2.music.126.net/style/web2/img/frame/topbar.png?2d1651dd0ffc2ce1dd6a081e7f70d23b") repeat-x 0 -80px;
        }

        .logo {
            background: url("http://s2.music.126.net/style/web2/img/frame/topbar.png?2d1651dd0ffc2ce1dd6a081e7f70d23b") no-repeat 0 15px;
            width: 157px;
            height: 70px;
            float: left;
        }

        .wrap {
            width: 1100px;
            margin: 0 auto;
        }

        .main-nav-wrap {
            height: 70px;
            display: inline-block;
        }

        .main-nav {
            height: 100%;
        }

        .main-nav > li {
            text-align: center;
            float: left;
            width: 100px;
            line-height: 70px;
            font-size: 18px;
            background: url("http://s2.music.126.net/style/web2/img/frame/topbar.png?2d1651dd0ffc2ce1dd6a081e7f70d23b") no-repeat right -300px;
        }

        .main-nav > li a, .sub-nav-inner a{
            text-decoration: none;
            color: white;
        }

        .subNav {
            position: absolute;
            left: 0;
            top: 70px;
            width: 100%;
            overflow: hidden;
            background-color: rgba(0,0,0,.6);
            padding:10px 0;
            display: none;
            z-index: 999;
        }

        .sub-nav-inner {
            padding-left: 157px;
            overflow: hidden;
        }

        .sub-nav-inner > li {
            text-align: center;
            float: left;
            width: 100px;
        }

        .sub-nav-inner a {
            display: inline-block;
            line-height: 25px;
            width: 100%;
            font-size: 14px;
        }

        .sub-nav-inner a:hover{
            color: #ff705e;
        }
        .video{
            width: 800px;
            margin:0 auto;
        }
        video{
            width: 100%;
        }

    </style>
</head>
<body>
<div class="top">
    <div class="wrap">
        <h1 class="logo"></h1>

        <div class="main-nav-wrap">
            <ul class="main-nav">
                <li><a href="#">周杰伦</a></li>
                <li><a href="#">许嵩</a></li>
                <li><a href="#">梁静茹</a></li>
                <li><a href="#">Aimer</a></li>
                <li><a href="#">薛之谦</a></li>
            </ul>

            <div class="subNav">
                <div class="wrap">
                    <ul class="sub-nav-inner">
                        <li>
                            <a href="#">告白气球</a>
                            <a href="#">开不了口</a>
                            <a href="#">断了的弦</a>
                            <a href="#">借口</a>
                            <a href="#">白色风车</a>
                            <a href="#">心雨</a>
                            <a href="#">珊瑚海</a>
                            <a href="#">简单爱</a>
                        </li>
                        <li>
                            <a href="#">又小雪</a>
                            <a href="#">如果当时</a>
                            <a href="#">多余的解释</a>
                            <a href="#">分手纪念日</a>
                        </li>
                        <li>
                            <a href="#">会呼吸的痛</a>
                            <a href="#">爱久见人心</a>
                            <a href="#">宁夏</a>
                            <a href="#">偶阵雨</a>
                            <a href="#">她</a>
                            <a href="#">如果冰箱会说话</a>
                            <a href="#">还是好朋友</a>
                        </li>
                        <li>
                            <a href="#">Aimer</a>
                        </li>
                        <li>
                            <a href="#">暧昧</a>
                            <a href="#">演员</a>
                            <a href="#">我害怕</a>
                            <a href="#">动物世界</a>
                            <a href="#">认真的雪</a>
                            <a href="#">绅士</a>
                            <a href="#">刚刚好</a>
                            <a href="#">高尚</a>
                            <a href="#">我好像在哪里见过你</a>
                            <a href="#">丑八怪</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>


    </div>
    <!--<ul class="nav">-->
    <!--<li> <a href="#">周杰伦</a></li>-->
    <!--<li> <a href="#">许嵩</a></li>-->
    <!--<li><a href="#">梁静茹</a></li>-->
    <!--<li><a href="#">Aimer</a></li>-->
    <!--<li><a href="#">薛之谦</a></li>-->
    <!--</ul>-->

    <!--<div class="inner-layout">-->
    <!--<ul class="inner-list">-->
    <!--<li> <a href="#">周杰伦</a></li>-->
    <!--<li> <a href="#">许嵩</a></li>-->
    <!--<li><a href="#">梁静茹</a></li>-->
    <!--<li><a href="#">Aimer</a></li>-->
    <!--<li><a href="#">薛之谦</a></li>-->
    <!--</ul>-->
    <!--</div>-->
</div>


<div class="video">
    <!--http://153.35.175.98/v4.music.126.net/20170607031140/c24df8fcdec782a6e133c0d62df7dd52/web/cloudmusic/MzEiMGAiYCAgODExICQwMQ==/mv/421024/a79afc013e1188df13a0ce2ed27aa470.mp4?wshc_tag=0&wsts_tag=593655af&wsid_tag=3af0aefe&wsiphost=ipdbm-->

    <video controls="" autoplay="" name="media"><source src="http://153.35.175.98/v4.music.126.net/20170607031140/c24df8fcdec782a6e133c0d62df7dd52/web/cloudmusic/MzEiMGAiYCAgODExICQwMQ==/mv/421024/a79afc013e1188df13a0ce2ed27aa470.mp4?wshc_tag=0&amp;wsts_tag=593655af&amp;wsid_tag=3af0aefe&amp;wsiphost=ipdbm" type="video/mp4"></video>
</div>
</body>
</html>

<script src="../../libs/jquery3_1_1.min.js"></script>
<script>
    $(function () {
        $('.main-nav-wrap').hover(function () {
            $(this).find(".subNav").stop().slideDown();
//            $(this).next().stop().slideDown();
        },function () {
            $(this).children(".subNav").stop().slideUp();
//            $(this).next().stop().slideUp();
        });
    })
</script>